<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="新增考试信息">
        <div>
          <div>
            <el-alert
                title="基本信息"
                type="success"
                :closable="false">
            </el-alert>
          </div>
          <div>
            <el-form :inline="true" :model="formInline"  class="user-search">
              <el-form-item label="考试名称:" prop="examName">
                <el-input size="medium"  placeholder="请输入考试名称" v-model="formInline.examAdministration.examName" ></el-input>
              </el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--              <el-form-item label="考试时间" prop="examQuizTime">-->
<!--                <el-input size="medium" v-model="formInline.examAdministration.examQuizTime" auto-complete="off" placeholder="请输入考试时间"></el-input>-->
<!--              </el-form-item>-->
              <span class="demonstration" >考试时间:&nbsp;&nbsp;</span>
              <el-date-picker
                  v-model="formInline.examAdministration.examQuizTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:12:12">
              </el-date-picker>
            </el-form>
          </div>
          <div>
            <el-form :inline="true" :model="formInline" ref="editForm" class="user-search" >
              <el-form-item label="答题时间:" prop="answerTime">
                <el-input size="medium"  placeholder="请输入答题时间" v-model="formInline.examAdministration.answerTime"></el-input>
              </el-form-item>

              <el-form-item label="">
                <el-button size="medium" disabled>分钟 </el-button>
              </el-form-item>
            </el-form>
          </div>

          <div>
            <el-form :inline="true" :model="formInline" ref="editForm" class="user-search" >

              <el-form-item label="参加限制:" >
                <el-button @click="doSomething()" size="medium" >考试开始 </el-button>
              </el-form-item>

              <el-form-item  label="" prop="referenceAstrictTime">
                <el-input size="medium"  placeholder="请输入" v-model="formInline.examAdministration.referenceAstrictTime"></el-input>
              </el-form-item>

              <el-form-item label="">
                <el-button @click="doSomething()" size="medium">分钟后禁止参加考试 </el-button>
              </el-form-item>
            </el-form>
          </div>

          <div>
            <el-form :inline="true" :model="formInline" ref="editForm" class="user-search" >
              <el-form-item label="交卷限制:">
                <el-button @click="doSomething()" size="medium">开始考试 </el-button>
              </el-form-item>

              <el-form-item label="" prop="presentationTime">
                <el-input size="medium"  placeholder="请输入" v-model="formInline.examAdministration.presentationTime"></el-input>
              </el-form-item>

              <el-form-item label="">
                <el-button @click="doSomething()" size="medium">分钟内不允许交卷 </el-button>
              </el-form-item>
            </el-form>
          </div>

<!--          <div>-->
<!--            <el-form :inline="true" :model="formInline" class="user-search" >-->
<!--              <el-form-item label="考试说明:" >-->
<!--                <el-input-->
<!--                    type="textarea"-->
<!--                    :autosize="{ minRows: 4, maxRows: 10}"-->
<!--                    placeholder="请输入内容"-->
<!--                    v-model="textarea3">-->
<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </div>-->

        </div><br><br>

        <div>
          <div>
            <el-alert
                title="试卷信息"
                type="success"
                :closable="false">
            </el-alert>
          </div>
          <!--        试卷选择用-->
<!--          v-model="formInline.examAdministration.paperId"-->
          <div class="block">
            <span class="demonstration">试卷选择</span>
<!--            <el-cascader-->
<!--                v-model="formInline.examAdministration.paperId"-->
<!--                placeholder="请选择试卷"-->
<!--                :options="options"-->
<!--                filterable-->
<!--                change-on-select-->
<!--            ></el-cascader>&nbsp;&nbsp;-->

            <el-select v-model="value" filterable placeholder="请选择试卷">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>


            <!--          <template> -->
            <!-- `checked` 为 true 或 false -->
            <span class="demonstration">试题排序:</span>&nbsp;&nbsp;
            <el-radio v-model="radio" label="1">固定排序</el-radio>
            <el-radio v-model="radio" label="2">随机排序</el-radio>
            <!--          </template>-->
          </div><br><br>

          <div>
            <span class="demonstration">选项排序:</span>&nbsp;&nbsp;
            <el-radio v-model="radio1" label="3">固定排序</el-radio>
            <el-radio v-model="radio1" label="4">随机排序</el-radio>
          </div><br><br>

          <div>
            <!-- 考试筛选 -->
            <el-form :inline="true" :model="formInline" class="user-search" >
              <el-form-item label="及格分数:" prop="passLine">
                <el-input size="medium"  placeholder="请输入" v-model="formInline.examAdministration.passLine"></el-input>
              </el-form-item>

              <el-form-item label="">
                <el-button @click="doSomething()" size="medium">总分100分 </el-button>
              </el-form-item>
            </el-form>

            <!--          <el-form :inline="true" label-width="100px" :model="form" size="mini" :disabled="true">-->
            <!--            <el-form-item label="">-->
            <!--              <el-button @click="doSomething()" size="medium">总分100分 </el-button>-->
            <!--            </el-form-item>-->


            <!--          </el-form>-->
          </div>

        </div><br>

        <div>
          <el-alert
              title="考生信息"
              type="success"
              :closable="false">
          </el-alert>
        </div>
        <div>
<!--          <div style="text-align:left">-->
<!--            <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>-->
<!--            <el-button size="small" type="primary" icon="el-icon-search" @click="search">导入</el-button>-->
<!--          </div>-->

          <!--列表-->
          <el-table size="small" :data="listData" highlight-current-row  border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column sortable prop="id" label="序号" width="50">
            </el-table-column>
            <el-table-column sortable prop="username" label="姓名" width="80">
            </el-table-column>
            <el-table-column sortable prop="identityId" label="证件号" width="200">
            </el-table-column>
            <el-table-column sortable prop="sex" label="性别" width="50">

            </el-table-column>
            <el-table-column sortable prop="tel" label="联系电话" width="200">
            </el-table-column>

            <el-table-column align="center" label="操作" min-width="300" width="251">
              <template slot-scope="scope">
<!--                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" :disabled="scope.row.is_add =='1'">添加</el-button>
                <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)" :disabled="scope.row.is_delete =='1'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              v-bind:child-msg="pageparm"
              @current-change="handleCurrentChange"
              :current-page="pageparm.currentPage"
              :page-sizes="[1, 3, 5, 8,15]"
              :page-size="pageparm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageparm.total" style="margin-left:200px;margin-top:16px">
          </el-pagination>
        </div>
        <div style="text-align:center">
          <el-button type="primary" @click="addRoutes2">取消</el-button>
          <el-button type="primary" @click="addRoutes3">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import examcard from "@c/examCard";
import paper from "@c/paper";

export default {

  created() {
    this.$axios.get('/api/paper/').then(
        res => {
          for (let i = 0; i < res.data.length; i++) {
            // console.log(res.data[i].id)
           this.options.push({
             value: parseInt(res.data[i].id),
             label: res.data[i].name,
             // usercont: parseInt(res.data[i].use_count + 1)
           })

          }
        }
    ).catch()

    this.getdata()
  },

  methods: {
    getdata() {
      // this.loading = true

      this.$axios.post('http://localhost:8080/user/findAll', this.formInline
      ).then(
          res => {
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data)
            this.listData = res.data.data.list
            this.pageparm.total = res.data.data.total


            this.pageparm.currentPage = res.data.data.pageNum;
            this.pageparm.pageSize = res.data.data.pageSize
            //初始化分页组件显示的总页数
            console.log("Exam对象后端数据》查询", res)
            console.log("Exam对象后端数据", res.data.data.total)
            this.handleCurrentChange.total = res.data.data.total

          })
    },


    //试卷使用次数
    // usecount: "",

    //取消按钮
    addRoutes2 () {
      this.$router.push('/exam/index')
    },

    //详情页的保存按钮
    addRoutes3 () {
      //把这个学生集合JSON转换成string并赋值给数据库定义的存学生的examInformation
      this.formInline.examAdministration.examInformation = JSON.stringify(this.listDatan)

      //试卷使用次数依次递增
      // this.formInline.examAdministration.use_count = parseInt(this.usecount +1);

      //把钩子函数里拿到的value赋值给paperId
      this.formInline.examAdministration.paperId = this.value
      this.$axios.post('http://localhost:8080/examAdministration/insertOne', this.formInline.examAdministration)
          .then(res => {
            console.log("添加",res.data.message)
            if (res.data.code == 200) {
              //刷新页面
              this.getdata(this.formInline)

              this.$message({

                type: '添加成功',
                message: '试卷添加成功！'
              })
            }
            else {
              this.$message({
                type: '添加失败',
                message: "试卷添加失败！"
              })
            }
          }).catch(err => {

        this.editFormVisible = false
        this.loading = false
        this.$message.error('添加失败')
      })

      this.$router.push('/review/chcek')
      // this.$router.push('/exam/index')
    },



    // 新增考试按钮用
    addRoutes1 () {
      this.$router.push('/exam/index')
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.limit =val
      this.formInline.page = 1
      this.getdata(this.formInline)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.page = val
      this.getdata(this.formInline)
    }
  },

  name: "index",
  components: {
    examcard,
    paper,
  },
  data() {

    return {

      //存学生的数组
      listDatan: [

      ],



      count:0,

      //选择试卷用
      value: '',
      label:'',
      // paperid:'',

      formInline: {
        page: 1,
        limit: 5,
        examAdministration:{
          examPeriod: '',
          examName: '',
          examQuizTime: '',
          answerTime: '',
          referenceAstrictTime: '',
          presentationTime: '',
          remindTime:'',
          paperId: '',
          passLine: '',
          use_count: '',
          examInformation:'',
          approvalTag:'2',
          // examQuizTime: '',
          // examPersonNum: '',
          // approvalTag: '',
          // examExamine: '',
        },

        // token: localStorage.getItem('logintoken')
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 20,
      },

      //试卷选择
      options: [

      ],



      //排序用
      radio: '1',
      radio1: '3',


      //基本信息用
      listData1: [{

      }],

      //试卷信息用
      listData2: [{

      }],

      listData: [
          // {
      //   id: '1',
      //   account: '王小虎',
      //   password: '11111111111111111',
      //   phone:15555555555,
      //   status:'男'
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1517 弄'
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1519 弄'
      // }, {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1516 弄'
      // }
      ],

      // timeFreq: [
      //   { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节2", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节4", time: "2020年5月23日16:33:56", dura: "60min" },
      //   { title: "章节5", time: "2020年5月23日16:33:56", dura: "60min" },
      // ],
      dutyRule: [
        { title: "章节331", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节212", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],
      falutHand: [
        { title: "章节1", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节25", time: "2020年5月23日16:33:56", dura: "60min" },
        { title: "章节3", time: "2020年5月23日16:33:56", dura: "60min" },
      ],

      // 导入事件
      search() {
        console.log('formInline',this.formInline);
        console.log('this.pageparm',this.pageparm);
        this.formInline.page = this.pageparm.currentPage;
        this.formInline.limit = this.pageparm.pageSize;
        this.getdata()
      },
      //保存编辑界面
      handleEdit: function(index, row) {

        //置灰
        if(row.is_delete ==1){
          row.is_delete = 0
        }

        row.is_add = 1
        //-----------------
        this.editFormVisible = true

        console.log("aaa",row)

        this.listDatan[this.count] = row
        this.count++
        console.log(this.listDatan)
        this.$message("添加成功")
      },

      deleteUser(index,row) {

        //置灰
        if(row.is_add == 1){

          row.is_add = 0
        }
        row.is_delete = 1
        //--------------------

        this.editFormVisible = true

        console.log("aaa",row)

        this.count--
        this.listDatan.splice(this.count,1)
        console.log(this.listDatan)
        this.$message("删除成功")
      },

      // 编辑与详情
      editForm: {
        id: null,
        examPeriod: '',
        examName: '',
        examQuizTime: '',
        examPersonNum: '',
        approvalTag: '1',
        examExamine: '1',
        // token: localStorage.getItem('logintoken')
      },

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4

    };
  },
  computed: {
    showShade() {
      return this.$store.state.settings.onShade;
    },
  },
};
</script>

<style scoped lang="scss">
.timeFreq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.dutyRule {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.falutHand {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
